<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="shop.css">
    <link rel="stylesheet" href="lb.css">
</head>
<body>
  <div class="main">
<!--    头部-->
    <header class="main_header" >
        <div class="header_h1">
            <h1>Jane Shopping</h1>
        </div>
        <div class="list">
            <ul>
                <li class=" list1 "></li>
                <li class="list2"></li>
                <li class="list3"></li>
                <li class="selected list4"></li>
                <li class="list5"></li>
                <li class="list6"></li>
            </ul>
        </div>
    </header>
<!--    导航栏-->
    <nav class="nav_shop">
        <ul>
            <li>
                <a id="hh" href="">首页</a>
                <ul class="ss">
                    <li>产品1号</li>
                    <li>产品2号</li>
                </ul>
            </li>
            <li>
                <a href="">衬衫</a>
                <ul class="ss">
                    <li>产品1号</li>
                    <li>产品2号</li>
                </ul>

            </li>
            <li>
                <a href="">卫衣</a>
                <ul class="ss">
                    <li>产品1号</li>
                    <li>产品2号</li>
                </ul>
            </li>
            <li>
                <a href="">裤子</a>
                <ul class="ss">
                    <li>产品1号</li>
                    <li>产品2号</li>
                </ul>
            </li>
            <li>
                <a href="">联系我们</a>
                <ul class="ss">
                    <li>产品1号</li>
                    <li>产品2号</li>
                </ul>
            </li>
        </ul>
    </nav>

<!--    内容区域-->
    <article class="article_shop">

<!--      侧边栏-->
      <aside class="aside_shop">

          <div class="news">
              <div class="new_header">
                  <div class="text"><h2>最新动态</h2></div>
                  <div class="imgs images1"><img src="imgs/down.gif"></div>
              </div>
              <div class="news_text">
                  <ul>
                      <li>瑞丽都疯狂推荐的秋装</li>
                      <li>48元长款衬衫疯狂出售</li>
                      <li>瑞丽都疯狂推荐的秋装</li>
                      <li>夏季短袖快来购买</li>
                      <li>瑞丽都疯狂推荐的秋装</li>
                      <li>瑞丽都疯狂推荐的秋装</li>
                  </ul>
              </div>
          </div>

          <div class="protuctfl">
              <div class="new_header">
                  <div class="text"><h2>产品分类</h2></div>
                  <div class="imgs images2"><img src="imgs/down.gif"></div>
              </div>

              <div class="proList">
                  <ul>
                      <li>
                          <img  id="1" src="imgs/treeview-expanded.gif"> 衬衫
                          <ul class="zimul up1">
                              <li><img src="imgs/treeview-item.gif">短袖衬衫</li>
                              <li><img src="imgs/treeview-item.gif">长袖衬衫</li>
                          </ul>
                      </li>
                      <li>
                          <img id="2" src="imgs/treeview-expanded.gif"> 卫衣
                          <ul class="zimul up2">
                              <li><img src="imgs/treeview-item.gif">开襟卫衣</li>
                              <li><img src="imgs/treeview-item.gif">头套卫衣</li>
                          </ul>
                      </li>
                      <li>
                          <img id="3" src="imgs/treeview-expanded.gif"> 裤子
                          <ul class="zimul up3">
                              <li><img src="imgs/treeview-item.gif">休闲裤</li>
                              <li><img src="imgs/treeview-item.gif">免烫卡其裤</li>
                              <li><img src="imgs/treeview-item.gif">牛仔裤</li>
                              <li><img src="imgs/treeview-item.gif">短裤</li>
                          </ul>
                      </li>
                  </ul>
              </div>
          </div>
      </aside>

<!--      内容区域-->
      <section class="section_shop">
<!--        内容区域头部轮播图-->
           <header>
               <div id="igs">
                   <a class="ig" href="#"><img src="imgs/1.gif"/></a>
                   <a class="ig" href="#"><img src="imgs/2.gif"/></a>
                   <a class="ig" href="#"><img src="imgs/3.gif"/></a>
                   <a class="ig" href="#"><img src="imgs/4.gif"/></a>
                   <a class="ig" href="#"><img src="imgs/5.gif"/></a>


                   <ul id="tabs">
                       <li class="tab">1</li>
                       <li class="tab">2</li>
                       <li class="tab">3</li>
                       <li class="tab">4</li>
                       <li class="tab">5</li>
                   </ul>
               </div>
           </header>

<!--          商品展示-->
          <section class="shop_list">
              <div class="list_header">
                  <div class="shop_text"><h2>新品上市</h2></div>
                  <div class="shop_icon">
                      <img src="imgs/left.gif"><img src="imgs/right.gif">
                  </div>
              </div>
              
              <div class="cloth_list">
                  <ul>
                      <li><img src="imgs/img_1.jpg"></li>
                      <li><img src="imgs/img_2.jpg"></li>
                      <li><img src="imgs/img_3.jpg"></li>
                      <li><img src="imgs/img_4.jpg"></li>
                  </ul>
              </div>
          </section>
      </section>
    </article>
  </div>

  <script type="text/javascript" src="jquery-3.1.1.min.js" ></script>
  <script src="lb.js"></script>
  <script language="javascript" type="text/javascript">
      $(document).ready(function(){
          $(".list>ul>li").click(function(){
              $(".list>ul>li").removeClass("selected");
              console.log($(this).index());
              $(this).addClass("selected");

              // 修改背景颜色
              var str = ['#BA3AD9', '#E11F5C', '#0BBDCE', '#FBA70B', '#AFD401', '#4666AB'];
              console.log(str[$(this).index()])
              $(".main_header").css("background",str[$(this).index()])
              $(".nav_shop").css("background",str[$(this).index()])
              $(".new_header").css("background",str[$(this).index()])
              $(".protuctfl>.profl_head").css("background",str[$(this).index()])
              $(".shop_list>.list_header").css("background",str[$(this).index()])
              $(".nav_shop>ul>li>.ss").css("background",str[$(this).index()])
              $(".nav_shop>ul>li>.ss>li").css("background",str[$(this).index()])

              //隐藏域


          });
          // $(".list ul li").click(function () {
          //     console.log(0)
          //     $(".nav_shop>ul>li>.ss").css("display",none)
          // })


          var i = 1;
          $(".images1").click(function () {

              if(i %2 != 0){
                  $(".news>.news_text>ul").css("display","none")
                  $(".images1>img").attr("src","imgs/up.gif")
                  i ++;
              }else{
                  $(".news>.news_text>ul").css("display","block")
                  $(".images1>img").attr("src","imgs/down.gif")
                  i ++;
              }
          });
          var j = 1;
          $(".images2").click(function () {

              if(i %2 != 0){
                  $(".proList>ul").css("display","none")
                  $(".images2>img").attr("src","imgs/up.gif")
                  i ++;
              }else{
                  $(".proList>ul").css("display","block")
                  $(".images2>img").attr("src","imgs/down.gif")
                  i ++;
              }
          });
          var k = 1;
          $(".proList>ul>li>#1").click(function () {
              console.log($(this).index())
              console.log($(".proList>ul>li").length)
              // for (var i = 0;i < $(".proList>ul>li").length;i++){
              //     $(".proList>ul>").eq(2).$("ul").css("display","none")
              //  }
              if(k %2 != 0){
                  $(".proList>ul>li>.up1").css("display","none")
                  $(".proList>ul>li>#1").attr("src","imgs/treeview-collapsed.gif")
                  k ++
              }else {
                  $(".proList>ul>li>.up1").css("display","block")
                  $(".proList>ul>li>#1").attr("src","imgs/treeview-expanded.gif")
                  k++
              }

          });
          var s = 1;
          $(".proList>ul>li>#2").click(function () {

              // for (var i = 0;i < $(".proList>ul>li").length;i++){
              //     $(".proList>ul>").eq(2).$("ul").css("display","none")
              //  }
              if(s %2 != 0){
                  $(".proList>ul>li>.up2").css("display","none")
                  $(".proList>ul>li>#2").attr("src","imgs/treeview-collapsed.gif")
                  s ++
              }else {
                  $(".proList>ul>li>.up2").css("display","block")
                  $(".proList>ul>li>#2").attr("src","imgs/treeview-expanded.gif")
                  s++
              }

          });
          var h = 1;
          $(".proList>ul>li>#3").click(function () {
              console.log($(this).index())
              console.log($(".proList>ul>li").length)
              // for (var i = 0;i < $(".proList>ul>li").length;i++){
              //     $(".proList>ul>").eq(2).$("ul").css("display","none")
              //  }
              if(h %2 != 0){
                  $(".proList>ul>li>.up3").css("display","none")
                  $(".proList>ul>li>#3").attr("src","imgs/treeview-collapsed.gif")
                  h ++
              }else {
                  $(".proList>ul>li>.up3").css("display","block")
                  $(".proList>ul>li>#3").attr("src","imgs/treeview-expanded.gif")
                  h++
              }

          });


          // $(".news_text").mouseover(function () {
          //
          //     setInterval(function(){
          //         $(".news_text").animate({top: '-50px'}, "slow", ()=>{
          //             let c = $(".news_text ul").children("li").get(0);
          //             $(".news_text ul").append(c)
          //             $(".news_text ul").css("top", "0px");
          //         });
          //     }, 2000)
          // })
      });


      //轮播图
      var arrImags = new Array("imgs/bg1.png", "imgs/bg2.png", "imgs/bg3.png", "imgs/bg4.png", "imgs/bg5.png");
      var time = 1;
      function changeImage(){
          if(time == 5){
              time = 1
          }
          $(".postion ul li").remove("active");
          $(".postion ul li:nth-child("+time+")").addClass("active");
          $(".lb li img").attr("src",arrImags[time - 1]);
          time ++;
      }

      var interval = window.setInterval(function () {
          changeImage();
      },1500);

      $(".btn a").each(function (index) {
          $(this).hover(function () {
              $(".btn a").removeClass("active");
              $(this).addClass("active");
              clearInterval(interval);
              $(".imgs img").attr("src",arrImags[index]);
              time = index + 1;
          },function () {
              interval = window.setInterval(function () {
                  changeImage()
              },3000)
          })
      })


  </script>
</body>
</html>